<template>
  <!-- 搜索 -->
  <div>
    <h1>搜索学生</h1>
    <select v-model="searchType">
      <option value="name">姓名</option>
      <option value="age">年龄</option>
      <option value="gender">性别</option>
    </select>
    <input type="text" v-model="searchValue" @keyup.enter="sendSearchData" />
    <button @click="sendSearchData">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchValue: "",
      searchType: "name"
    };
  },
  methods: {
    // 搜索数据传递触发事件
    sendSearchData() {
      this.$emit("search", this.searchType, this.searchValue);
    }
  }
};
</script>

<style lang="scss" scoped>
input {
  width: 200px;
}
button {
  margin-top: 10px;
}
</style>
